<script src="../../config/index.js"></script>
<template>
  <div class="mask">
    <div class="warn">
      <div class="head">
        <h5>查看详情</h5>
        <span @click="close">X</span>
      </div>
      <div class="conten">
        <div>
          <span>热点标题:</span>
          <input class="inputText" readonly="readonly" v-model="dataInfo.hotspotTitle" type="text">
        </div>
        <div>
          <span>来源:</span>
          <input class="inputText" readonly="readonly" v-model="dataInfo.hotspotSource" type="text">

          <span class="right">作者:</span>
          <input class="inputText" readonly="readonly" v-model="dataInfo.hotspotAuthor" type="text">
        </div>

        <div>
          <span class="articleSpan">正文:</span>
          <div class="article" v-html="dataInfo.hotspotContent">
          </div>
        </div>

        <div>
          <span>数据状态</span>
          <input class="inputText" readonly="readonly" v-model="dataInfo.dataStatus=='8'?'已通过':'未通过'" type="text">
        </div>

        <div>
          <span>创始人</span>
          <input class="inputText" readonly="readonly" v-model="dataInfo.hotspotAuthor" type="text">

          <span>创建时间</span>
          <input class="inputText" readonly="readonly" v-model="moment(dataInfo.itemcreateat).format('YYYY-MM-DD HH:mm:ss')" type="text">
        </div>
      </div>
    </div>
  </div>
</template>
<script>


  const axios=require("axios");
  var moment=require("moment");

  export default {
    name: 'Check',
    data(){
      return{
        moment
      }
    },
    props:{
      dataInfo:{}
    },

    methods:{
      close(){
        this.$emit("close");
      }
    }



  }
</script>
<style>

  *{margin:0;padding:0;}
  ul,ol,li{
    list-style-type: none;
  }
  .w {
    width: 1280px;
    margin: auto;
  }
  img{
    border: 0;
    vertical-align: middle;
  }

  a{
    text-decoration:none
  }


  .mask{
    z-index: 99;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #4950577d;
  }

  .warn{width: 800px; height:650px;overflow: hidden;position: absolute;top: 50%;left: 0;right: 0;margin:auto;border-radius: 8px;background-color: #fff;transform: translateY(-50%);-webkit-transform: translateY(-50%);}

  .warn .head{
    height: 68px;
    border-bottom: 1px #dee2e6 solid;
  }
  .warn .head h5{

    float: left;
    padding: 20px 20px;
    font-size: 1.25rem;
    color: #7e7e7e;
  }
  .warn .head span{
    margin-left: 600px;
    color: #7e7e7e;
    float: right;
    height: 100%;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    line-height: 68px;
    width: 68px;
  }
  .warn .head span:hover{
    cursor:pointer;
    color: #303030;
  }

  .warn .conten>div span{
    display:inline-block;
    width: 100px;
    height: 50px;
    padding-right: 10px;
    line-height: 50px;
    color: #775637;
    text-align: right;
  }

  .conten .inputText{
    height: 35px;
    width: 200px;
    padding-left:10px;
    background-color: #e9ecef;
    outline:none;
    border: 1px solid #ced4da;
    font-size: 1rem;
    font-weight: 400;
    color: #495057;
  }

  .conten>div:nth-child(1) input{
    width: 580px;
  }

  .conten .right{
    margin-left: 50px;
  }

  .conten .article{
    display: inline-block;
    height: 300px;
    width: 575px;
    overflow: scroll;
    position: absolute;
    border: 1px solid #ced4da;
    padding: 10px;
  }



  .conten>div:nth-child(3){
    height:330px ;
    position: relative;
  }

</style>


